import { Component } from 'react'
import { Form, Input, Button, ImageUploader, Toast } from 'antd-mobile'
import Head from 'next/head'
import PageLayout from '@/components/layouts/PageLayout'
import { withRouter, NextRouter } from 'next/router'

interface VerifyIdentityPageProps {
  router: NextRouter
}

class VerifyIdentityPage extends Component<VerifyIdentityPageProps> {
  formRef = Form.useForm()[0]

  onFinish = async (values: any) => {
    try {
      // 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 1000))
      
      // 保存认证状态
      localStorage.setItem('isAuthenticated', '111')
      
      Toast.show({
        icon: 'success',
        content: '认证成功'
      })
      
      this.props.router.back()
    } catch (error) {
      Toast.show({
        icon: 'fail',
        content: '认证失败'
      })
    }
  }

  render() {
    return (
      <>
        <Head>
          <title>实名认证 - 移动端应用</title>
        </Head>
        <PageLayout 
          title="实名认证" 
          showTab={false} 
          onBack={() => this.props.router.back()}
        >
          <div className="verify-page">
            <Form
              form={this.formRef}
              layout='vertical'
              onFinish={this.onFinish}
              footer={
                <Button block type='submit' color='primary' size='large'>
                  提交认证
                </Button>
              }
            >
              <Form.Item
                name='name'
                label='真实姓名'
                rules={[{ required: true, message: '请输入真实姓名' }]}
              >
                <Input placeholder='请输入真实姓名' />
              </Form.Item>

              <Form.Item
                name='idCard'
                label='身份证号'
                rules={[{ required: true, message: '请输入身份证号' }]}
              >
                <Input placeholder='请输入身份证号' />
              </Form.Item>

              <Form.Item
                name='idCardFront'
                label='身份证正面照'
                rules={[{ required: true, message: '请上传身份证正面照' }]}
              >
                <ImageUploader maxCount={1} upload={async (file) => file} />
              </Form.Item>

              <Form.Item
                name='idCardBack'
                label='身份证背面照'
                rules={[{ required: true, message: '请上传身份证背面照' }]}
              >
                <ImageUploader maxCount={1} upload={async (file) => file} />
              </Form.Item>
            </Form>
          </div>

          <style jsx>{`
            .verify-page {
              padding: 16px;
            }
            :global(.adm-form) {
              background: white;
              border-radius: 8px;
              padding: 16px;
            }
            :global(.adm-form-item) {
              margin-bottom: 16px;
            }
          `}</style>
        </PageLayout>
      </>
    )
  }
}

export default withRouter(VerifyIdentityPage) 